<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/color.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>  
    <script type="text/javascript" src="../javascript/color-2.0.0.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
    <style>
        #editor-wrap{
            position: absolute;
            top:0;
            left: 0;
            height: 100%;
            width: 100%;
            border-top: 40px solid #fff;
            padding: 0 30px 10px 30px;
        }
        #h0001{
            line-height: 40px;
            position: absolute;
            top:0;
            left: 0;
            height: 40px;
            width: 100%;
            padding: 0 30px;
        }
    </style>
</head>

<body>
   <div id="editor-wrap" class="k_box_size">      
      <span style="padding:12px 36px"><input id="color1" type="text"/></span>
      <span style="padding:12px 36px"><input id="color2" type="text"/></span>
   </div>
    <h1 id="h0001" class="k_box_size">拾色器Demo</h1>
    <script type="text/javascript">
        var $color;
        $B.DomUtils.onDomLoaded(function () {
            $color = new $B.Color("color1",{
                onChange:function(hex,opacity){               
                    this.style.backgroundColor = hex;
                    this.style.opacity =opacity;
                    this.value = hex;
                    var rgbObj = $B.hex2RgbObj(hex);
                    var fcolor = $B.getContrastColor(rgbObj);
                    this.style.color =fcolor;
                }
           });
        //    var clickFn = function(e){
        //         let bcolor = $B.DomUtils.css(this,"background-color");
        //         let opacity = $B.DomUtils.css(this,"opacity");
        //         console.log(bcolor,opacity);
        //         $color.setValue(bcolor,opacity);
        //         $color.show(this);
        //    };
        //    $B.DomUtils.click(document.getElementById("color1"),clickFn);
        //    $B.DomUtils.click(document.getElementById("color2"),clickFn);
           new $B.Color("color2",{
                onChange:function(hex,opacity){
                    console.log(this,hex,opacity);
                    this.style.backgroundColor = hex;
                    this.style.opacity =opacity;
                    this.value = hex;
                    var rgbObj = $B.hex2RgbObj(hex);
                    var fcolor = $B.getContrastColor(rgbObj);
                    this.style.color =fcolor;
                }
           });
        });
       
    </script>
</body>

</html>